<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绘制高清图片</title>
    <style>
        canvas {
            display: block;
            margin: 10px auto 0;
            border: 1px solid orange;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="600" height="500">您的浏览器不支持canvans</canvas>
</body>
<script>
    const canvans = document.getElementById('canvas')
    const ctx = canvans.getContext('2d')

    const getPixelRatio = context => {
        return window.devicePixelRatio || 1
    }

    /**
     *  01. 放大canvas
     *  02. 在css中将宽高设置为原来的大小
     *  03. 考虑到内容的缩放，因此也需要将ctx 缩放
     * */
    const ratio = getPixelRatio()
    const oldWith = canvans.width
    const oldHeight = canvans.height
    // 放大canvas
    canvans.width = canvans.width * ratio
    canvans.height = canvans.height * ratio
    // css中设置为原来的大小
    canvans.style.width = oldWith + 'px'
    canvans.style.height = oldHeight + 'px'
    // 缩放ctx
    ctx.scale(ratio,ratio)

    ctx.beginPath()
    ctx.lineWidth = 10
    ctx.strokeStyle = 'orange'
    ctx.moveTo(100,100)
    ctx.lineTo(300,300)
    ctx.lineTo(500,200)
    ctx.stroke()
    ctx.closePath()
</script>
</html>